<template>
	<view class="container">
		<view class="content">
			<header-view></header-view>
			<view class="card">
				<view class="card_name">
					<text>{{StockDetail.name}}</text>
				</view>
				<view class="card_detail flex_between">
					<view class="price">{{StockDetail.buy_price}}</view>
					<view class="time">{{StockDetail.last_refreshed}}</view>
				</view>
			</view>
			<view class="kline_box">
				<kline-view :id="id"></kline-view>
			</view>
			<view class="detail_list flex">
				<view class="detail_item"><text style="opacity:0.5">高</text>:<text>$</text><text class="item_price">
						{{StockDetail.high}}</text></view>
				<view class="detail_item"><text style="opacity:0.5">总量</text>:<text>$</text><text class="item_price">
						{{StockDetail.volume}}</text></view>
				<view class="detail_item"><text style="opacity:0.5">低</text>:<text>$</text><text class="item_price">
						{{StockDetail.low}}</text></view>
			</view>
			<view class="btns flex_between">
				<button class="btn bg_up" @tap="toBuy('sell')">卖出</button>
				<button class="btn bg_down" @tap="toBuy('buy')">买入</button>
			</view>
		</view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView.vue"
	import klineView from "@/components/kline/index.vue"
	import {
		stockDetailApi
	} from '@/api/api.js'
	export default {
		components: {
			headerView,
			klineView
		},
		data() {
			return {
				id: '',
				keyword: '',
				StockDetail: {},
				timer: null,
			}
		},
		onLoad(options) {
			this.id = options.id
			this.keyword = options.keyword
			this.requestStockDetail();
		},
		onShow() {
			this.timer = setInterval(() => {
				this.requestStockDetail()
			}, 1000 * 30)
		},
		onHide() {
			clearInterval(this.timer)
		},
		onUnload() {
			clearInterval(this.timer)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			// 请求商品详情
			requestStockDetail() {
				const token = uni.getStorageSync('token')
				const id = this.id
				const keyword = this.keyword
				stockDetailApi({
					token,
					id,
					keyword
				}).then(res => {
					// console.log(res)
					this.StockDetail = res.data.data
				})
			},
			toBuy(key) {
				const id = this.StockDetail.id; // 获取上个页面接收的id
				let type = "0";

				switch (key) {
					case "buy":
						type = "1";
						break;
					case "sell":
						type = "2";
						break;
				}
				uni.navigateTo({
					url: "/pages/detail/detail?type=" + type + "&id=" + id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;

		.card {
			background-color: #0065ff;
			background-image: url("../../static/img/btn_bg.png");
			background-size: cover;
			border-radius: 40rpx;
			padding: 40rpx;
			margin-top: 40rpx;

			.card_name {
				padding: 10rpx 20rpx;
				background-color: rgba(255, 255, 255, 0.4);
				color: #fff;
				display: inline-block;
				border-radius: 10rpx;
			}

			.card_detail {
				align-items: baseline;
				margin-top: 30rpx;
				color: #fff;

				.price {
					font-family: PM;
					font-size: 64rpx;
					line-height: 90rpx;
				}

				.time {
					margin-right: 20rpx;
					opacity: 0.5;
				}
			}
		}

		.kline_box {
			height: 830rpx;
		}

		.detail_list {
			flex-wrap: wrap;
			margin-top: 20rpx;
			column-gap: 20rpx;

			.detail_item {
				width: calc(50% - 11rpx);
				font-size: 30rpx;

				.item_price {
					font-size: 42rpx;
					margin-left: 8rpx;
					font-family: PM;
				}
			}
		}

		.btns {
			margin-top: 60rpx;
			column-gap: 40rpx;
			font-size: 42rpx;

			.btn {
				flex: 1;
				border-radius: 30rpx;
				padding: 20rpx 0;
			}
		}

		/deep/uni-button {
			font-size: 42rpx;
			line-height: 58rpx;
		}
	}
</style>